---
title: <Tabs />
---

This component should only be rendered inside a `_layout.tsx` file, where it will serve as the location that children will render for routes below the layout.

Tabs is simply a [React Navigation Bottom Tabs view](https://reactnavigation.org/docs/bottom-tab-navigator) and accepts the same props as React Navigation.

For now, you do need to set the `href` option on each Tabs.Screen to match the route file name. The plan is to automate this in the future.

```tsx
import { Tabs } from 'one'

export default function Layout() {
  return (
    <Tabs>
      <Tabs.Screen
        name="explore"
        options={{
          title: 'Explore',
          href: '/explore',
        }}
      />
    </Tabs>
  )
}
```

<Notice>
  Adding a new tab route has a bug currently that can cause it to not show up until you re-run your app with `--clean`.
</Notice>
